<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
{%load i18n%}
<head>
    <meta charset="UTF-8">
    <title>{% trans 'Webterminal Login' %}</title>
    {% if otp_is_open %}
    <style>
        .stark-login form {
              height: 315px !important;
            }
    </style>
    {% endif %}
    <link rel="stylesheet" href="{% static 'css/login.css' %}">
</head>

<body>
<div id="logo">
    <h1><i> WEBTERMINAL</i></h1>
</div>

<section class="stark-login">
    <div id="fade-box">


<form action="{{ app_path }}" method="post" id="form">
  {% if user.is_authenticated %}
        <a style="color: red;">
            {% blocktrans trimmed %}
            You are authenticated as {{ username }}, but are not authorized to
            access this page. Would you like to login to a different account?
            {% endblocktrans %}
        </a>
{% endif %}
        {% if form.non_field_errors %}
        {% for error in form.non_field_errors %}
        <a style="color: red;">
            {{ error }}
        </a>
        {% endfor %}
{% endif %}
{% csrf_token %}
<input type="text" name="username" id="id_username" placeholder="{% trans "Username" %}" value="{% if form.username.value %}{{ form.username.value }}{% endif %}" autofocus required />
<input type="password" name="password" placeholder="{% trans 'Password' %}" id="id_password" required />
<input type="hidden" name="next" value="{{ next }}" />
{% if otp_is_open %}
    <input type="text" name="otp_token" placeholder="{% trans 'Token OTP' %}" id="otp_token"  />
    <p><h4>{% trans 'If you are first login to system and not configure otp just ignore otp token!' %}</h4></p>
    <!--{% if form.get_user %}-->
        <!--{{ form.otp_device.errors }}{{ form.otp_device }} -->
    <!--{% endif %}-->
    {{ form.otp_token.errors }}
{% endif %}
{% csrf_token %}
<input type="submit" value="{% trans 'Log in' %}" />
<select name="language" onchange="selectdo(this)">
                {% get_current_language as LANGUAGE_CODE %}
                {% get_available_languages as LANGUAGES %}
                {% get_language_info_list for LANGUAGES as languages %}
                {% for language in languages %}
                <option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected{% endif %}>
                    {{ language.name_local }} ({{ language.code }})
                </option>
                {% endfor %}
            </select>
<a href="{%url 'password-reset' %}">{% trans "Forgot Password" %}</a>
</form>

</div>

<div class="hexagons">
        <img src="{% static 'img/backgroud.jpg' %}" height="100%" width="100%"/>
    </div>
</section>

<div id="circle1">
    <div id="inner-cirlce1">
        <h2></h2>
    </div>
</div>

<script src="{% static "plugins/jQuery/jquery-2.2.3.min.js" %}"></script>
<script src="{% static 'js/login.js' %}" ></script>
<script  type="text/javascript">
    function selectdo(obj) {
        str="{% url 'set_language' %}";
        myform = document.getElementById('form');
        myform.method = "POST";
        myform.action = str;
        myform.submit();
    }
</script>


<!-- Matomo -->
<script type="text/javascript">
  var _paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//193.112.194.114:8002/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->
</body>
</html>
